<%@ page contentType="text/html;charset=UTF-8" language="java" %>

    <html lang="zh">

    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>${readercard.name}的主页</title>
        <link rel="shortcut icon" href="img/library.ico" />
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
        <script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>

        <style>
            /* 自定义导航栏样式 */
            .navbar {
                background-color: #fff !important;
                box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
                padding: 10px 0;
                position: fixed;
                top: 0;
                width: 100%;
                z-index: 1000;
            }

            .navbar-brand p {
                font-family: "华文行楷", "楷体", cursive;
                font-size: 28px;
                font-weight: bold;
                color: #337ab7 !important;
                margin: 0;
            }

            .navbar-nav .nav-link {
                color: #333 !important;
                font-weight: 500;
                padding: 10px 15px;
                transition: all 0.3s ease;
            }

            .navbar-nav .nav-link:hover {
                color: #fff !important;
                background-color: #337ab7 !important;
            }

            .navbar-nav .nav-link:active {
                color: #fff !important;
                background-color: #2c3e50 !important;
                transform: scale(0.98);
                box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
            }

            /* 页面背景和布局 */
            body {
                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
                background-image: url('img/华师2.jpg.v');
                /* 更改为你想使用的图片路径 */
                background-size: cover;
                /* 保证图片覆盖整个背景 */
                background-position: center center;
                /* 确保图片居中显示 */
                color: var(--dark-text);
                min-height: 100vh;
                padding-top: 60px;
            }

            .panel {
                border-radius: 8px;
                border: none;
                box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
                background-color: #fff;
                margin: 0 auto;
                padding: 20px;
                max-width: 700px;
                /* 限制最大宽度 */
            }

            .panel-heading {
                background-color: #f8f9fa;
                border-bottom: 2px solid #ddd;
                padding: 10px 15px;
                font-size: 1.25rem;
                font-weight: 600;
            }

            .input-group-addon {
                font-weight: bold;
                width: 150px;
                /* 固定标签宽度 */
                text-align: right;
                padding-right: 10px;
            }

            .input-group input {
                font-size: 1rem;
                width: calc(100% - 150px);
                /* 输入框宽度减去标签宽度 */
            }

            .btn-success {
                background-color: #1a237e;
                border: none;
                padding: 8px 20px;
                border-radius: 4px;
                color: white;
                cursor: pointer;
                transition: background-color 0.3s ease;
            }

            .btn-success:hover {
                background-color: #283593;
            }

            .input-group {
                margin-bottom: 20px;
                display: flex;
                align-items: center;
            }

            .alert {
                padding: 15px;
                border-radius: 4px;
                margin-top: 20px;
            }

            .alert-success {
                background-color: #28a745;
                color: white;
            }

            .alert-danger {
                background-color: #dc3545;
                color: white;
            }

            /* 表单样式 */
            .form-control {
                font-size: 1rem;
                border-radius: 4px;
                padding: 8px;
            }

            .panel-body {
                padding: 20px;
            }
        </style>

    </head>

    <body>

        <!-- 自定义导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-light">
            <div class="container-fluid">
                <a class="navbar-brand" href="reader_main.html">
                    <p class="text-primary" style="font-family: 华文行楷; font-size: 28px;">智慧图书馆</p>
                </a>
                <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="collapse navbar-collapse" id="navbarNav">
                    <ul class="navbar-nav me-auto">
                        <li class="nav-item">
                            <a class="nav-link" href="reader_books.html">图书查询</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="reader_info.html">个人信息</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="mylend.html">我的借还</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="reader_repasswd.html">密码修改</a>
                        </li>
                    </ul>
                    <ul class="navbar-nav">
                        <li class="nav-item">
                            <a class="nav-link" href="reader_info.html">${readercard.name}, 已登录</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link" href="login.html">退出</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>

        <!-- 主体内容 -->
        <div id="header" style="padding-bottom: 80px"></div>

        <div class="col-xs-5 col-md-offset-3">
            <div class="panel panel-default">
                <div class="panel-heading">
                    <h3 class="panel-title">信息修改</h3>
                </div>
                <div class="panel-body">
                    <form action="reader_edit_do_r.html" method="post" id="edit">
                        <div class="input-group">
                            <span class="input-group-addon">读者证号</span>
                            <input type="text" readonly="readonly" class="form-control" name="readerId" id="readerId"
                                value="${readerinfo.readerId}">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">姓名</span>
                            <input type="text" class="form-control" name="name" id="name" value="${readerinfo.name}">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">性别</span>
                            <input type="text" class="form-control" name="sex" id="sex" value="${readerinfo.sex}">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">生日</span>
                            <input type="text" class="form-control" name="birth" id="birth" value="${readerinfo.birth}">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">地址</span>
                            <input type="text" class="form-control" name="address" id="address"
                                value="${readerinfo.address}">
                        </div>
                        <div class="input-group">
                            <span class="input-group-addon">电话</span>
                            <input type="text" class="form-control" name="phone" id="phone" value="${readerinfo.phone}">
                        </div>
                        <br />
                        <input type="submit" value="确定" class="btn btn-success btn-sm">
                        <script>
                            $("#edit").submit(function () {
                                if ($("#name").val() == '' || $("#sex").val() == '' || $("#birth").val() == '' || $("#address").val() == '' || $("#phone").val() == '') {
                                    alert("请填入完整图书信息！");
                                    return false;
                                }
                            })
                        </script>
                    </form>
                </div>
            </div>
        </div>

    </body>

    </html>